<script setup lang="ts">
import { onMounted, ref } from "vue";
const sizes = ref({
  width: 1920,
  height: 1080
});
const style = ref({
  width: sizes.value.width + "px",
  height: sizes.value.height + "px",
  transform: "scale(1) translate(-50%, -50%)"
});

const Debounce = (fn, t) => {
  const delay = t || 500;
  let timer;
  return function () {
    const args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    const context = this;
    timer = setTimeout(() => {
      timer = null;
      fn.apply(context, args);
    }, delay);
  };
};
// 获取放大缩小比例
const getScale = () => {
  const w = window.innerWidth / sizes.value.width;
  const h = window.innerHeight / sizes.value.height;
  return w < h ? w : h;
};
// 设置比例
const setScale = () => {
  style.value.transform = "scale(" + getScale() + ") translate(-50%, -50%)";
};

onMounted(() => {
  setScale();
  window.onresize = Debounce(setScale, 1000);
});
</script>

<template>
  <div class="ScreenAdapter" :style="style">
    <slot />
  </div>
</template>

<style scoped lang="scss">
.ScreenAdapter {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: 0.3s;
  transform-origin: 0 0;
}
</style>
